<template>
  <!-- 精选题库 -->
  <div class="container">
    <el-card class="box-card">
      <div class="title">
        <span class="title-txt">
          说明：目前支持学科和关键字条件筛选
        </span>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="addTest"
          >新增试题</el-button
        >
      </div>
      <!-- 表单区域 -->
      <el-form ref="formRef" :model="form" label-width="75px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 100%"
                v-model="form.subjectID"
                placeholder="请选择"
                @change="subjectChange"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in simpleList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="form.catalogID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="level.label"
                  :value="level.value"
                  v-for="level in levelList"
                  :key="level.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="form.tags"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="tags.label"
                  :value="tags.value"
                  v-for="tags in tagsList"
                  :key="tags.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" placeholder="请选择">
              <el-input
                v-model="form.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="form.questionType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="type.label"
                  :value="type.value"
                  v-for="type in questionType"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                v-model="form.difficulty"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in difficulty"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                v-model="form.direction"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in direction"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="form.creatorID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="user.username"
                  :value="user.id"
                  v-for="user in userInfo"
                  :key="user.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" class="item">
              <!-- 省份 -->
              <el-select
                style="width:49%;margin-right:1%"
                v-model="form.province"
                placeholder="请选择"
                @change="provinceChange"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in provinces"
                  :key="index"
                ></el-option>
              </el-select>
              <!-- 城市 -->
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width:50%"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in cityList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-form-item>
              <div class="btn-box">
                <el-button size="mini" @click="resetClick">清除</el-button>
                <el-button type="primary" size="mini" @click="onSearch"
                  >搜索</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="chkState" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"> </el-tab-pane>
        <el-tab-pane label="待审核" name="0"> </el-tab-pane>
        <el-tab-pane label="已审核" name="1"> </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 表格 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <el-table :data="boutiqueList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="130">
        </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">{{ '单选' }}</span>
            <span v-else-if="scope.row.questionType === '2'">{{ '多选' }}</span>
            <span v-else>{{ '简答' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" width="180" label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" width="190" label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">{{ '简单' }}</span>
            <span v-else-if="scope.row.questionType === '2'">{{ '一般' }}</span>
            <span v-else>{{ '困难' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120px">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState === 0">{{ '待审核' }}</span>
            <span v-else-if="scope.row.chkState === 1">{{ '通过' }}</span>
            <span v-else>{{ '拒绝' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150px">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120px">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState === 1">{{ '已发布' }}</span>
            <span v-else>{{ '待发布' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="230"
          class="edit-btn"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="previewOnclicke(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              @click="auditOnClick(scope.row)"
              :disabled="scope.row.chkState === 1 || scope.row.chkState === 2"
              >审核</el-button
            >
            <el-button
              type="text"
              @click="editOnClick(scope.row)"
              :disabled="scope.row.publishState === 1"
              >修改</el-button
            >
            <el-button type="text" @click="putawayOnClicke(scope.row)">{{
              scope.row.publishState === 1 ? '下架' : '上架'
            }}</el-button>
            <el-button
              type="text"
              @click="delOnClicke(scope.row)"
              :disabled="scope.row.publishState === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 预览弹框 -->
      <el-dialog title="题目预览" :visible.sync="previewVisible" width="70%">
        <questions-view
          :questionID="questionID"
          v-if="previewVisible"
          @close="previewVisible = false"
        ></questions-view>
      </el-dialog>
      <!-- 审核弹框 -->
      <el-dialog title="提示" :visible.sync="auditVisible" width="30%">
        <questions-check
          v-if="auditVisible"
          :auditVisible="auditVisible"
          @close="auditVisible = false"
          :newData="newData"
          @updata-chkState="updataChkState"
        ></questions-check>
      </el-dialog>
      <!--  -->
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="form.page"
          :page-size="form.pagesize"
          layout="prev,  pager, next,sizes, jumper"
          :page-sizes="[5, 10, 15, 30]"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入学科列表API
import { simple } from '@/api/hmmm/subjects.js'
import { simple as level } from '@/api/hmmm/directorys.js'
import { simple as tag } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple as user } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
// 导入获取题库API
import { choice, choicePublish, remove } from '@/api/hmmm/questions.js'
// 导入试题审核组件
import QuestionsCheck from '../components/questions-check'
// 导入预览组件
import QuestionsView from '../components/questions-preview'
import dayjs from 'dayjs'

export default {
  name: 'handpick',
  data() {
    return {
      form: {
        //  当前页码
        page: 1,
        //  每页展示条数
        pagesize: 5,
        catalogID: '',
        tags: ''
      },
      //  学科简单列表
      simpleList: [],
      // 目录
      levelList: [],
      tagsList: [],
      // 试题类型
      questionType: questionType,
      // 试题难度
      difficulty: difficulty,
      // 方向
      direction: direction,
      // 录入人
      userInfo: [],
      provinces: [],
      cityList: [],
      // 精品题库列表
      boutiqueList: [],
      // 总条数
      total: 0,
      chkState: 'all',
      // 控制预览弹框是否显示
      previewVisible: false,
      // 控制审核弹框是否显示
      auditVisible: false,
      // 当前的数据
      newData: {},
      questionID: ''
    }
  },
  components: {
    QuestionsCheck,
    QuestionsView
  },
  created() {
    // 获取简单列表
    this.getSimpleList(),
      //  获取录入人信息
      this.getUser()
    ;(this.provinces = provinces()),
      //  获取题库列表
      this.getBoutiqueList()
  },
  computed: {
    // citys () {
    //   return citys(this.province)
    // }
  },
  methods: {
    // 学科
    async getSimpleList() {
      try {
        const { data } = await simple()
        this.simpleList = data
      } catch (err) {
        this.$message('获取数据失败')
      }
    },
    // 二级目录
    async subjectChange() {
      const { data } = await level({
        subjectID: this.form.subjectID
      })

      this.levelList = data
      this.levelChange()
      this.form.catalogID = ''
    },
    // 标签
    async levelChange() {
      this.form.tags = ''
      const { data } = await tag({
        subjectID: this.form.subjectID
      })
      this.tagsList = data
    },
    // 录入人
    async getUser() {
      try {
        const { data } = await user()
        this.userInfo = data
      } catch (err) {
        this.$message('获取数据失败')
      }
    },
    // 城市
    provinceChange() {
      this.cityList = citys(this.form.province)
    },
    // 重置表单
    resetClick() {
      this.form = this.$options.data().form
      this.getBoutiqueList()
    },
    // 获取所有试题列表
    async getBoutiqueList() {
      this.getL(this.form)
    },
    async getL(i) {
      try {
        const { data } = await choice(i)
        data.items.forEach(element => {
          return (element.addDate = dayjs(element.addDate).format(
            'YYYY-MM-DD HH:mm:ss'
          ))
        })
        this.boutiqueList = data.items
        this.total = data.counts
      } catch (err) {
        this.$message('获取试题失败')
      }
    },
    async handleClick(tab, event) {
      if (this.chkState === 'all') {
        this.getBoutiqueList()
      } else {
        const queryInfo = {
          ...this.form,
          chkState: this.chkState
        }

        const { data } = await choice(queryInfo)

        this.boutiqueList = data.items
        this.total = data.counts
      }
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      this.form.pagesize = val
      this.getBoutiqueList()
    },
    // 页码发生改变
    handleCurrentChange(val) {
      this.form.page = val
      this.getBoutiqueList()
    },
    // 搜索
    onSearch() {
      this.getL(this.form)
    },
    // 预览弹框
    previewOnclicke(item) {
      this.previewVisible = true

      this.questionID = item.id
    },
    // 审核弹框
    auditOnClick(item) {
      this.newData = item
      this.auditVisible = true
    },
    // 修改审核状态
    updataChkState(val) {
      this.newData.chkState = val
      // this.getSimpleList()
    },
    // 修改按钮
    editOnClick(item) {
      const id = item.id
      this.$router.push({ path: 'new', query: { id: id } })
    },
    // 上架下架
    putawayOnClicke(data) {
      var txt = data.publishState === 1 ? '下架' : '上架'
      var state = data.publishState === 1 ? 0 : 1
      this.$confirm(`您确认${txt}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await choicePublish({
              id: data.id,
              publishState: state
            })
            this.getBoutiqueList()
          } catch (err) {
            this.$message('操作失败')
          }
          this.$message({
            type: 'success',
            message: `${txt}成功!`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 删除
    delOnClicke(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await remove(data)
            this.getBoutiqueList()
          } catch (err) {
            this.$message('操作失败')
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增试题
    addTest() {
      this.$router.push('new')
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 15px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: pink;
    font-size: 12px;
    margin-bottom: 10px;
  }
  // .item {
  //   display: flex;
  //   justify-content: ;
  // }
  .form-count {
    // max-width: 1107px  !important;
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      // min-width: 270px;
      .btn-box {
        margin-left: 67px !important;
      }
    }
    //  /deep/ .el-input {
    //    width: 50% !important;
    //   }
  }
  /deep/ .cell {
    text-align: center !important;
  }
  .paging {
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid-content {
    padding: 10px 10px 10px 0;
  }
}
</style>
